/**
 * 申请一个WebSocket对象，参数是需要连接的服务器端的地址，
 * 同http协议使用http://开头一样，
 * WebSocket协议的URL使用ws://开头，
 * 另外安全的WebSocket协议使用wss://开头
 */
var ws = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
    setMessageInnerHTML("浏览器支持Websocket")
    ws = new WebSocket("ws://127.0.0.1:8888/ws");
} else {
    setMessageInnerHTML('当前浏览器 Not support websocket')
}
//当websocket创建成功时，即会触发onopen事件
ws.onopen = function () {
    setMessageInnerHTML("WebSocket连接成功");
    var content = document.getElementById("content").value;
    if (content == null || content == "") {
        ws.send("XiaoFeng");//用于叫消息发送到服务端  注：此处为用户名
    } else {
        ws.send(content);
    }
};

ws.onmessage = function (event) {//当客户端收到服务端发来的消息时，会触发onmessage事件，参数evt.data中包含server传输过来的数据
    document.getElementById("span").innerHTML += "当前在线人数为：" + event.data;
};
ws.onclose = function (evt) {//当客户端收到服务端发送的关闭连接的请求时，触发onclose事件
    setMessageInnerHTML("WebSocket连接关闭");
};
//连接发生错误的回调方法
ws.onerror = function () {
    setMessageInnerHTML("WebSocket连接发生错误");
};
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
    ws.onclose;
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
    document.getElementById('span').innerHTML += '<br/>' + innerHTML + '<br/>';
}